<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="app">
    </div>
    <script type="text/javascript" src="./vue.min.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script type="text/javascript">
    var App = {
        template: `
				<div>
					<button @click = 'sendAjax'>发请求</button>
				</div>

			`,
        methods: {
            sendAjax() {

                this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/'
                this.$axios.get('', {
                        params: { id: 1 },
                        // 在传递给then/catch之前，允许修改响应的数据
                        transformResponse: [function(data) {
                            // 对 data 进行任意转换处理
                            // console.log(data);
                            // console.log(typeof data);
                            data = JSON.parse(data);
                            console.log(data);
                            return data;
                        }]
                    })
                    .then(res => {
                        console.log(res.data.msg);
                    })
                    .catch(err => {
                        console.log(err);
                    })


                this.$axios.post('/add', {
                        firstName: 'Fred'
                    }, {
                        // `transformRequest` 允许在向服务器发送前，修改请求数据
                        // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
                        // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
                        transformRequest: [function(data) {
                            // 对 data 进行任意转换处理

                            console.log(data);

                            return data;
                        }],

                    })
                    .then(res => {
                        console.log(res);
                    })
                    .catch(err => {
                        console.log(err);
                    })
            }
        }

    };

    Vue.prototype.$axios = axios

    new Vue({
        el: '#app',
        template: `<App />`,
        components: {
            App
        }
    });
    </script>
</body>

</html>